<template>

  <!-- 导航栏 -->
  <van-nav-bar
    title="消费记录"
    left-text="返回"
    left-arrow
    fixed
    placeholder
    z-index="1000"
    @click-left="back"
    @click-right="SearchShow = true"
  >
    <template #right>
      <van-icon name="search" size="20" />
    </template>
  </van-nav-bar>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
  <!-- 加载列表 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    v-model:error="error"
    error-text="请求失败，点击重新加载"
    :offset="10"
    :immediate-check="false"
    finished-text="没有更多了"
    @load="load"
  >
    <div class="item" v-for="(item, key) in list" :key="key">
      <p>{{item.createtime_text}}，消费金额￥{{item.total}}元</p>
      <p class="content">{{item.content}}</p>
      <p>金额：-￥{{item.total}}元</p>
      <p>时间：{{item.createtime_text}}</p>
    </div>
  </van-list>
</van-pull-refresh>

  <!-- 返回顶部 -->
  <van-back-top />

</template>

<script setup>
  const {proxy} = getCurrentInstance()
  let business = proxy.$business.value

  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let limit = ref(10)
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新
  let count =  ref(0)
  const error = ref(false);
  

  onMounted(() => {
    //触发刷新效果
    refresh()    
  })

  //下拉刷新
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      //清空查询参数
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true

      //加载数据方法
      load()
    }, 10)
  }

  //上拉加载
  const load = async () =>
  {
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }

    var params = {
    page: page.value,
    busid: business.id,
    limit: limit.value
    }
    var result = await proxy.$POST({
      url: '/business/record',
      params
    })

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    if(!result) return false

    if(result.code == 0)
    {
      //如果没有更多数据了 就说明已经加载到底了....
      finished.value = true
      return false
    }
    //合并
    list.value = list.value.concat(result.data.list)
    page.value++
    count.value = result.data.count
  }

  //返回个人中心
  const back = () => proxy.$router.push('/business')
</script>

<style scoped>
  .item{
    background:#fff;
    width:100%;
    text-indent: 1.5em;
    font-size:1em;
    padding:10px 0;
    border-bottom:1px solid #3012d6;
  }
</style>